<template>
  <div class="detail">
    <!-- 搜索返回 -->
    <van-nav-bar :title="detailShop.name" @click-left="$router.back()" left-arrow>
    </van-nav-bar>
    <!-- 商品 -->
    <div class="detailShop">
      <img :src="$api.baseImg + detailShop.img">
      <div>
        <span v-text="detailShop.name"></span>
        <span v-text="detailShop.desc"></span>
      </div>
      <div>{{detailShop.price | handPrice}}</div>
    </div>
    <!-- 立即购买 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
      <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
      <van-goods-action-button type="warning" text="加入购物车"  @click="onaddCart"/>
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="onBuy"
      />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  name: 'Detail',
  data(){
    return {
      detailShop: {}
    }
  },
  props:{
    id: {
      type: String,
      default: '',
      require: true
    }
  },
  mounted() {
    const params = {
      goods_id: this.id
    }
    this.$api.detailGoods(params).then(res => {
      console.log(res);
      this.detailShop = res
    });

  },
  methods: {
    onBuy(){

    },
    onaddCart(){
      console.log(this.$utils.verify.verifyToken());
      if(this.$utils.verify.verifyToken()) {
        const params = {
          num: 1,
          goods_id: this.id
          // goods: this.id
        }
        this.$api.goodsToCart(params).then((res) => {
          console.log(res);
        this.$router.replace('/cart')
        })
      }
      else {
        this.$router.push('/tologin');
      }
    },
    onClickIcon() {
      this.$router.push('/cart')
    }
  }

}
</script>

<style scoped lang="scss">
.detail {
  .detailShop {
    font-size: 1.6rem;
    color: #262626;
    img {
      width: 37.5rem;
      height: 37.5rem;
    }

  } 
}
</style>
